<!DOCTYPE html>
<html lang="en">
  <head>
    <title>annotations demo Demo Page</title>
  </head>

  <body>
  <h2>annotations demo Page</h2>
    <div id="ephox-ui">
      <div class="tinymce">
        <p>abc <span class="mce-annotation" data-mce-annotation-uid="mce-annotation_94269650211529705226881" data-mce-annotation="alpha" data-mce-comment="abc">alpha 1</span></p>
        <p><span class="mce-annotation" data-mce-annotation-uid="mce-annotation_94269650211529705226882" data-mce-annotation="alpha" data-mce-comment="def">alpha 1</span> def</p>
        <p>abc <span class="mce-annotation" data-mce-annotation-uid="mce-annotation_94269650211529705226883" data-mce-annotation="alpha" data-mce-comment="123">alpha 2 [<span class="mce-annotation" data-mce-annotation-uid="mce-annotation_942696502115297052268413" data-mce-annotation="alpha" data-mce-comment="123">nested alpha 3</span>] 2</span> def</p>
        <p>abc <span class="mce-annotation" data-mce-annotation-uid="mce-annotation_94269650211529705226884" data-mce-annotation="beta">beta 1</span></p>
      </div>
    </div>

    <script src="../../../../js/tinymce/tinymce.js"></script>
    <script src="../../../../scratch/demos/core/demo.js"></script>
    <script>demos.AnnotationsDemo();</script>


    <br><br>
    <p>Test api, select some text (collapse or ranged) then paste api below to add annotation</p>
    <textarea>
      tinymce.activeEditor.annotator.annotate('alpha', {'author': 'Its Me'});
    </textarea>
  </body>
</html>
